<template>
	<view class="relative">
		<!-- 遮罩 -->
		<view class="uni-mask" @touchmove.stop.prevent="" v-if="flag" @click="flag=false"></view>
<!-- 		<view class="uni-mask" v-if="flag2"></view> -->
		<!-- #ifndef APP-PLUS -->
			<!-- <view style="height: 70rpx;" v-if="!full_id"></view> -->
		<!-- #endif -->
		
		<view class="tishi" v-if="!full_id">
			<!-- v-if="!full_id" -->
			<view style="position: relative;">
				<view class="th_list" >
					<view class="th_one" :class="{active:sai==0}" @click="sortFlag()">
						{{type}}
						<image v-if="!flag2 &&sai!=0" src="../static/images/search_shang_black.png"></image>
						<image class="fanzhuan" v-if="!flag2 &&sai==0" src="../static/images/search_xia_red.png"></image>
						<image v-if="flag2" src="../static/images/search_xia_red.png"></image>
					</view>
					<view class="th_one" :class="{active:sai==1}" @click="ruleType(0)">
						销量
					</view>
				
					<view class="th_one" :class="{active:sai==2}" @click="flag=true;flag2=false;sai=2;">筛选</view>	
				</view>
				<view class="paixu_list" v-if="flag2">
					<view class="flex_center_between" :class="{active:sortNumber==index}" @click="choiceType(index,item)" v-for="(item,index) in sortList" :key="index">
						<view>{{item}}</view>
						<image v-if="sortNumber==index" src="../static/images/search_check.jpg"></image>
					</view>
				</view>
				<!-- <view class="toast">店铺优惠 - 满&nbsp;<text>¥ 99 </text>减&nbsp;<text>¥ 50 </text>~ 再凑&nbsp;<text>¥ 20 </text>可享满减~</view> -->
			</view>
		</view>

		<view class="shop_contianer">
			<view v-for="(item,index) in ListInfo" :key="index"  class="shop_box" @click="Todetails(item.goods_id)">
				<view class="relative">
					
					<image v-if="item.goods_image_url" :src="item.goods_image_url" class="shop_box_image"></image>
					<image v-else :src="item.goods_image" class="shop_box_image"></image>
					<!-- <view class="shop_box_stack">可获得66.5￥</view> -->
				</view>
				<view class="shop_title">{{item.goods_name}}</view>
				<view class="shop_span">
					<view class="color"><text class="bold">￥</text>{{item.goods_price}}</view>
					<!-- <view>销量：{{item.goods_salenum}}</view> -->
					<view class="Sales" @click.stop="AddCar(item.goods_id)"><image src="@/static/images/w-4.png" mode=""></image></view>
				</view>
			</view>
			<!-- <view style="margin:auto;padding: 10rpx 0;color: #999999;">加载更多</view> -->
		</view>
		
		<!-- 筛选 -->
<view  class="sxMask" v-if="flag" @click="Close()">
			<view class="innerMask" @click.stop="zuzhi()">
				<view class="innerMaskTop flex_align">
					<view>筛选</view>
					<image src="@/static/images/sx.png" class="sxImage"></image>
				</view>
				
				<scroll-view class="scrollX" scroll-y="true" >
					<view class="innerMaskCenter">
						<view class="innerMaskCenterT flex_bettween flex_align">
							<text class="fl fs18 bold">品牌</text>
							<view class="fr fs18 C999 flex_align" >
								<view class="fs18 C999" @click="Allpinpai()">全部</view>
								<image class="xj" src="@/static/images/down.png"></image>
							</view>
						</view>
						<view class="pplis" :class="{'show':pinpai}">
							<text class="ppli" :class="{xuanze:filter1==index+1}" v-for="(item,index) in pinpaiList" :key='index' @click="brand(index,item.brand_id)">{{item.brand_name}}</text>
						</view>
						
						<view class="innerMaskCenterT mt flex_bettween flex_align">
							<text class="fl fs18 bold">商品分类</text>
							<view class="fr fs18 C999 flex_align" >
								<view class="fs18 C999" @click="AllClass()">全部</view>
								<image class="xj" src="@/static/images/down.png"></image>
							</view>
						</view>
						<view class="ppfllis" :class="{'show':aClass}">
							<text class="ppli" :class="{xuanze:filter2==index+1}" v-for="(item,index) in fenleiList" :key='index' @click="recommend_class(index,item.gc_id)">{{item.gc_name}}</text>				
						</view>
						
					</view>
				</scroll-view>
				
				<view class="innerMaskBottom">
					<button class="fl innerMaskBottom1" @click="chongzhi()">重置</button>
					<button class="fr innerMaskBottom2" @click="innerMask()">确定</button>
				</view>
			</view>
		</view>
		<view v-if="ListInfo.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
		<view class="Bottom flexBox">
			<view class="">
				<view class="" v-if="total_num">数量：{{total_num||0}}件</view>
				<view class="" v-if="total_price">总价：￥{{total_price||0}}</view>
			</view>
			<view class="ToCar" @click="ToCar()">去购物车</view>
		</view>
		<view style="height: 100rpx;"></view>
		
		
		
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				flag:false,//控制筛选
				flag2:false,//控制排序搜索展示
				sai:0,//筛选
				filter1:0,
				brand_id:"",
				filter2:0,
				gc_id:"",
				curpage:1,
				rule1:0,//销量升降序
				rule2:0,//价格升降序
				type:'综合排序',
				sortNumber:0,
				pinpaiList:[],
				fenleiList:[],
				sortList:['综合排序','价格升序','价格降序','上架时间','浏览量'],
				pinpai:false,
				aClass:false,
				is_promotion:0,//加入购物车活动参数
				store_id:32,//店铺id
				mfunjian_id:"",//m件付n件
				ListInfo:"",
				nzhe_id:"",//n件折
				full_id:"",//满额满量
				total_num:"",
				total_price:""
			}
		},
		onLoad(e) {
			console.log(e,"ssssssssssssssss")
			if(e.nzhe_id){
				this.nzhe_id=e.nzhe_id;
				this.is_promotion=4;
			}
			if(e.mfunjian_id){
				this.mfunjian_id=e.mfunjian_id;
				this.is_promotion=3;
			}
			if(e.store_id){
				this.store_id=e.store_id;
			}
			if(e.full_id){
				this.full_id=e.full_id;
				console.log(this.full_id,"sssss")
			}
			this.getList();
			this.getbrand();
			this.getClass();
		},
		// created() {
			
		// },
		onReachBottom(){
			if(this.curpage){
				this.getList("","",true)
			}else{
				uni.showToast({
					title:'已是最后一页！',
					icon:'none'
				})
			}
		},
		methods:{
			ToCar(){
				uni.switchTab({
					url:"/main/cart/list"
				})
			},
			Todetails(goods_id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+goods_id
				})
			},
			Allpinpai(){
				this.pinpai=!this.pinpai;
			},
			AllClass(){
				this.aClass=!this.aClass;
			},
			AddCar(goods_id){
				let that=this;
				this.$util.request({			 
					url:'/mobile/index.php?act=member_cart&op=cart_add',
					method:'POST',
					data:{
						goods_id:goods_id,
						quantity :'1',
						is_promotion:that.is_promotion,//N元任选
					}
				}).then(res=>{
					if(res.datas=='1'){
						uni.showToast({
							title:'加入成功！'
						})
						this.getList()
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			Repurcha(){
				this.getChange();
				this.Repurchase=true;
			},
			hide(){
				this.Repurchase=false;
			},
			Navto(goods_id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+goods_id
				})
			},
				
			chongzhi(){
				this.filter1=0;
				this.filter2=0;
				this.brand_id="";
				this.gc_id="";
			},
			innerMask(){
				this.flag=false;
				this.getList();
			},
			Close(){
				this.flag=false;
			},
			brand(index,brand_id){
				this.filter1=index+1;
				this.brand_id=brand_id;
			},
			recommend_class(index,gc_id){
				this.filter2=index+1
				this.gc_id=gc_id;
			},
			getbrand(){//获取品牌列表
				let that = this;
					this.$util.request({
						url: '/mobile/index.php?act=brand&op=index',
						method: 'get',
						data: {},
					}).then(function(res) {
						that.pinpaiList=res.datas
						console.log(res)
					})
			},
			getClass(){//获取分类列表
				var that=this		
				this.$util.request({
					url: '/mobile/index.php?act=index&op=recommend_class',
					method: 'get',
					data: {},
				}).then(function(res) {
					that.fenleiList=res.datas.list
				})
			},
			getList(sort="",order="",stat){//获取列表信息
				let that = this;
				console.log(that.full_id,"aaaaaaaaaaa")
				let Ajaxurl="index.php?act=promotion_mfunjian&op=list"
				if(that.mfunjian_id){//m件付n件
					Ajaxurl="index.php?act=promotion_mfunjian&op=list"
				}
				if(that.nzhe_id){//n件折
					Ajaxurl="index.php?act=promotion_nzhe&op=list"
				}
				if(that.full_id){//满额满量
					Ajaxurl="index.php?act=full_activity&op=activity_goods_list"
				}
			
					this.$util.request({
						url: '/mobile/'+Ajaxurl,
						method: 'get',
						data: {
							curpage:that.curpage,
							store_id:that.store_id,
							mfunjian_id:that.mfunjian_id,
							nzhe_id:that.nzhe_id,
							full_id:that.full_id,
							sort:sort,
							order:order,
							gc_id:that.gc_id,
							b_id:that.brand_id,
							
							},
					}).then(function(res) {
						if(res.error_code==0){
							that.total_num=res.datas.total_num
							that.total_price=res.datas.total_price
							if(res.datas.activity_info){
								that.activity_info=res.datas.activity_info;
							}
							if(stat){
								if(res.datas.goods_list){
									that.ListInfo=that.ListInfo.concat(res.datas.goods_list);
								}
								if(res.datas.activity_goods_list){
									that.ListInfo=that.ListInfo.concat(res.datas.activity_goods_list);
								}
							}else{
								if(res.datas.goods_list){
									that.ListInfo=res.datas.goods_list;
								}
								if(res.datas.activity_goods_list){
									that.ListInfo=res.datas.activity_goods_list;
								}
							}
							that.curpage++;
							if(res.datas.page_total){
								if(that.curpage>=res.datas.page_total){
									that.curpage=false;
								}
							}
							if(res.datas.paged){
								if(!res.datas.paged.hasmore){
									that.curpage=false;
								}
							}
							
						}else{
							uni.showToast({
								icon:"none",
								title:res.message
							})
						}
						
						
					})
				},
			// 销量价格排序 index:1为销量 2为价格
			ruleType(index){
				let that=this;
				that.brand_id="";
				that.gc_id="";
				that.curpage=1;
				this.flag2=false
				this.sai=1
				if(!index){
					if(this.rule1>1){
						this.rule1=0
					}else{
						this.rule1++
					}
				}
				this.getList(1);
			},
			//排序展开方法
			sortFlag(){
				this.flag2=!this.flag2
				this.sai=0
			},
			//选择排序方法
			choiceType(index,name){
				let that=this;
				that.brand_id="";
				that.gc_id="";
				that.curpage=1;
				this.type=name
				if(index==this.sortNumber){
					this.sortNumber=0
				}else{
					this.sortNumber=index
				}
				this.sortFlag()
				if(index==0){
					this.getList()//综合排序
				}else if(index==1){
					this.getList(3,1)//价格升序
				}else if(index==2){
					this.getList(3)//价格降序
				}else if(index==3){
					this.getList(4)//上架时间
				}else if(index==4){
					this.getList(2)//浏览量
				}
			},
			zuzhi(){},
		}
	}
</script>

<style scoped>
	.Bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		z-index: 999999999;
		display: flex;
		align-items: center;
	}
	.Bottom>view{
		width: 50%;
		text-align: center;
	}
	.Bottom .ToCar{
		background-color: #ff4300;
		color: #FFFFFF;
		line-height: 100rpx;
		font-size: 35rpx;
	}
	.Sales image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.scrollX{
		height: 1000rpx;
	}
	.pplis,.ppfllis{
		height: 130rpx;
		overflow: hidden;
	}
	.show{
		height: auto !important;
		overflow: overlay !important;
	}
	.bgco{
		background-color:  #F8F8F8 !important;
	}
	.fanzhuan{
		transform: rotate(180deg);
	}
	.xuanze{background-color: #ff4300 !important;color: #ffffff;}
	.tishi{
		/* position: fixed;top: 100rpx; width: 100%;z-index: 99999; */
	}
	.toast{
		border-top: 1rpx solid #F0F0F0;background-color: #FFFFFF;
		padding:10rpx 0 10rpx 30rpx;font-size: 26rpx;
	}
	.toast>text{
		color: #ff4300;
	}
	.active{
		color: #ff4300;
	}
	.paixu_list{
		position: absolute;background-color: #FFFFFF;
		z-index: 9999 !important;width: 100%;
	}
	.flex_center_between{
		display: flex;justify-content: space-between;align-items: center;
	}
	.paixu_list>view{
		border-bottom: 1rpx solid #F0F0F0;padding:10rpx 20rpx;
	}
	.paixu_list image{
		width: 40upx;height: 40upx;
	}
	uni-button:after{
		border-radius: 0;
		border: none;
	}
	.flex_align{
		display: flex;align-items: center;
	}
	.flex_bettween{
		display: flex;justify-content: space-between;
	}
	/* 商品 */
	.shop_contianer{
		background-color: #efeff4;display: flex;
		flex-wrap: wrap;justify-content: flex-start;padding:10upx 10upx;
	}
	.shop_box{
		width:46%;background-color: #FFFFFF;padding: 1%;margin: 0.5% 0% 2%;border-radius:10upx;
	}
	.shop_box:nth-child(odd){
		margin-right: 2%;
	}
	.shop_box:nth-child(even){
		margin-left: 2%;
	}
	.relative{
		position: relative;
	}

	.shop_box_image{
		width: 100%;height: 325upx;border-radius: 10rpx;
	}
	.shop_box_stack{
		color: #FFFFFF;background-color: #ff4300;width: 100%;
		text-align: center;bottom: 0;position: absolute;height: 50upx;
	}
	.shop_title{
		margin-top: 16upx;;overflow: hidden;display: -webkit-box; -webkit-line-clamp: 2;
		-webkit-box-orient: vertical;text-overflow: ellipsis;
	}
	.shop_span{
		margin-top: 25upx;font-size: 30upx;display: flex;justify-content: space-between;
	}
	.color{
		color: #ff4300;
	}
	.bold{
		font-weight: bold;
	}
	/* 列表 */
	.th_list{
		display: flex;justify-content: space-between;align-items: center;
		height: 70upx;background-color: #FFFFFF;text-align: center;
	}
	.th_one{
		width: 30%;font-size: 32upx;display: flex;justify-content: center;align-items: center;
	}
	.th_one image{
		width: 45upx;height: 45upx;margin-top: 6rpx;
	}
	.th_two{
		width: 20%;display:flex;align-items: center;
	}
	.th_three{
		width: 20%;font-size: 32upx;
	}
	.th_two view{
		font-size: 32upx;
	}
	.th_two image{
		font-size: 32upx;
		height: 35upx;width: 30upx;
	}
	/* 筛选 */
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.sxImage{
		width: 30upx;height: 30upx;margin-left: 15upx;
	}
	.arrImage{
		width: 36upx;height: 15upx;margin-left: 5upx;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 21upx
	}
	.innerMaskCenterT{
		height: 80upx;
		line-height: 80upx;
		padding: 0 28upx;
	}
	.bold{
		font-weight: bold;
	}
	.C999{
		color: #999999;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.fs18{
		font-size: 24upx;
	}
	.fs21{
		font-size: 26upx
	}
	.pplis{
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		padding: 0 28upx;
		flex-wrap: wrap;
	}
	.ppli{
		margin: 8upx 10upx;
		padding: 5upx 0upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
		min-width: 29%;
		text-align: center;
		align-items: center;
	}
	.ppfllis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
		border-radius: 15upx;
	}
	.ppflli{
		margin-top: 20upx;
		padding: 5upx 40upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{
	
		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	
	.jgInput{
		padding-left: 28upx;
		display: flex;
		flex-direction: row;
	}
	.jgInput input{
		border: none;
		border-radius: 5upx;
		text-align: center;
		background-color: #f0f2f5;
		width: 162upx;
		height: 43upx;
	}
	.inputC{
		position: relative;
		top: -5upx;
		padding: 0 15upx;
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.xj{
		margin-left: 8rpx;
		width: 24upx;
		height: 14upx;
	}
	.mt{
		margin-top: 20upx;
	}
</style>
